<template>
  <view>
    <!-- 使用 UserInfo 组件 -->
    <UserInfo />

    <!-- 使用 VipCards 组件 -->
    <VipCards />

    <!-- 添加四个跳转栏 -->
    <view class="nav-container">
      <view class="nav-item" @click="navigateToPage('/pages/orders/orders')">
        <text>我的订单</text>
      </view>
      <view class="nav-item" @click="navigateToPage('/pages/favorite/favorite')">
        <text>我的收藏</text>
      </view>
      <view class="nav-item" @click="navigateToPage('/pages/index/history')">
        <text>历史记录</text>
      </view>
      <view class="nav-item" @click="navigateToPage('/pages/chat/chat')">
        <text>客服聊天</text>
      </view>
	  <view class="nav-item" @click="navigateToPage('/pages/my/feedBack')">
	    <text>用户反馈</text>
	  </view>
    </view>
  </view>
</template>

<script>
import UserInfo from './user_info.vue';
import VipCards from './vip_cards.vue';

export default {
  name: 'Index',
  components: {
    UserInfo,
    VipCards
  },
  methods: {
    navigateToPage(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
.nav-container {
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
}

.nav-item {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 16px;
  color: #333;
}

.nav-item:last-child {
  border-bottom: none; /* 最后一项没有底部边框 */
}

.nav-item:hover {
  background-color: #f4f4f4; /* 鼠标悬停效果 */
}

h1 {
  color: #333;
}
</style>
